<template>
  <div>
    User

    <hr />
    <button @click="bol = !bol">点击切换bol</button>
    <keep-alive>
      <!-- 
        它内部的东西保持不销毁 ,但前提是自己(keep-alive)不会让销毁
        它内部的组件就生命周期会发生变化
           创建期
           渲染期
           更新期
           销毁期
           激活时与隐藏时：它们是keep-alive内组件独有的生命周期
           激活时activated：keep-alive内的组件显示时会执行,第一次显示是在渲染完成后执行，
           隐藏时deactivated:keep-alive内的组件隐藏时会执行
      -->
      <HmSon v-if="bol"></HmSon>
    </keep-alive>
  </div>
</template>

<script>
import HmSon from '@/views/HmSon.vue'
export default {
  name: 'UserPage',
  data () {
    return {
      bol: true
    }
  },
  components: {
    HmSon
  }
}
</script>
